import React from 'react';
import { Accordion } from 'antd-mobile';
import './style/chicang.css';

class ChiCang extends React.Component {

    state = {
        selectAll: false,
        data: [],
        selectData: [],
    }

    componentDidMount() {
        const data1 = [
            { title: '美原油', kcjg: '232.23', dqjg: '232.00', ykje: '-900.22', select: false,selectImg: false, },
            { title: '美原油', kcjg: '232.23', dqjg: '232.00', ykje: '+23.34', select: false,selectImg: false },
            { title: '美原油', kcjg: '232.23', dqjg: '232.00', ykje: '+23.34', select: false,selectImg: false },
            { title: '美原油', kcjg: '232.23', dqjg: '232.00', ykje: '+23.34', select: false,selectImg: false },
            { title: '美原油', kcjg: '232.23', dqjg: '232.00', ykje: '+23.34', select: false,selectImg: false },
            { title: '美原油', kcjg: '232.23', dqjg: '232.00', ykje: '+23.34', select: false,selectImg: false },
            { title: '美原油', kcjg: '232.23', dqjg: '232.00', ykje: '+23.34', select: false,selectImg: false },
            { title: '美原油', kcjg: '232.23', dqjg: '232.00', ykje: '+23.34', select: false,selectImg: false },
            { title: '美原油', kcjg: '232.23', dqjg: '232.00', ykje: '+23.34', select: false,selectImg: false },
            { title: '美原油', kcjg: '232.23', dqjg: '232.00', ykje: '+23.34', select: false,selectImg: false },
            { title: '美原油', kcjg: '232.23', dqjg: '232.00', ykje: '+23.34', select: false,selectImg: false },
            { title: '美原油', kcjg: '232.23', dqjg: '232.00', ykje: '+23.34', select: false,selectImg: false },

        ];
        this.setState({
            data: data1
        })
    }

    selectAll = (e) => {
        e.stopPropagation();
        const data = this.state.data;
        data && data.find((v, k, arr) => {
            v.select = !this.state.selectAll;
            return '';
        });
        this.setState({
            selectAll: !this.state.selectAll,
            data: data,
            selectData: this.state.selectAll ? [] : data
        })
    }

    select = (e, value) => {
        e.stopPropagation();
        const data = this.state.data;
        const selectData = [...this.state.selectData];
        data && data.find((v) => {
            if (value === v) {
                if (v.select) {
                    selectData && selectData.find((v, k, arr2) => {
                        if (value === v) {
                            arr2.splice(k, 1);
                        }
                        return '';
                    })
                    v.select = !v.select;
                } else {
                    v.select = !v.select;
                    selectData.push(v);
                }
            }
            return '';
        });
        this.setState({
            data,
            selectData,
            selectAll: selectData.length === data.length ? true : false
        });

    }
    newSelectAll(item,index){
        const {data}=this.state
        item.selectImg=!item.selectImg
        this.setState({
            data:data
        })
    }
    render() {
        return (<div className='chicang'>
            <div className='header'>
                <div className='left'>
                    <span>总盈亏（元）： </span><span>¥2323.00</span>
                </div>
                <span className='right'>快速平仓</span>
                {this.props.data && this.props.data.type1 === 'moni' ? <img alt='' className='img' src={require('./img/index/xunipan.png')}></img> : null}
            </div>
            <div className='main'>
                <div className='tabbar'>
                    {this.state.selectAll ? <img alt='' onClick={this.selectAll} src={require('./img/index/select.png')} ></img> : <span onClick={this.selectAll} className='unselect'></span>}
                    <span className='newLeft3'>合约名称</span>
                    <span className='newLeft1'>开仓价格</span>
                    <span className='newLeft1'>当前价格</span>
                    <span className='newLeft1'>盈亏金额</span>
                </div>
                <Accordion accordion onChange={this.onChange}>
                    {
                        this.state.data && this.state.data.map((v, k) => {
                            return (
                                <Accordion.Panel key={v + k} header={
                                    <div className='tabbar'  onClick={() => this.newSelectAll(v,k)}>
                                        {v.select ? <img alt='' onClick={(e) => this.select(e, v)} src={require('./img/index/select.png')} ></img> : <span onClick={(e) => this.select(e, v)} className='unselect'></span>}
                                        <span className='newLeft'>{v.title}</span>
                                        <span style={{ display: 'flex', flex: 1, color: '#333333' }}>{v.kcjg}</span>
                                        <span style={{ display: 'flex', flex: 1, color: '#333333' }}>{v.dqjg}</span>
                                        <div style={{display:"flex",flex:1,alignItems:"center",paddingRight:"0.5rem",width:"100%"}} className="ellipsis">
                                            <span className="ellipsis" style={{ display: 'flex',width:"100%", flex: 1, color: `${v.ykje && v.ykje.indexOf('-') > -1 ? '#28D1A7' : '#FC5656'}` }}>{v.ykje} 12321312312</span>
                                            <img  className="iconImg" src={!v.selectImg? require('./img/index/top.png') : require('./img/index/bottom.png')} alt='' ></img>
                                        </div> 

                                    </div>
                                }  >
                                    <div className='accordion'>
                                        <div className='first'>
                                            <span>开仓方向：买涨8手</span>
                                            <span style={{ justifyContent: 'center' }}>止盈点：23.00</span>
                                            <span style={{ justifyContent: 'flex-end' }}>止损点：-1000</span>
                                        </div>
                                        <div className='second'>
                                            <span>委托时间：4-23  12:23:34</span>
                                            <span style={{ justifyContent: 'flex-end' }}>委托号：20200422122334</span>
                                        </div>
                                        <div className='third'>
                                            <span>保证金：1223</span>
                                            <span className="text1" >手续费：2323</span>
                                            <span className="text2" >一键反手</span>
                                            <span className="text3" >快速平仓</span>
                                        </div>
                                    </div>
                                </Accordion.Panel>
                            )
                        })
                    }
                </Accordion>
            </div>
        </div>)
    }
}

export default ChiCang;